<template>
  <view class="realtime_box">
    <Head title="实时疯抢榜" :transparent="false">
      <!-- <text slot="action">搜索</text> -->
    </Head>
    <!-- 一级类目 -->
    <view class="category_top">
      <scroll-view scroll-x="true" class="scroll" :scroll-left="scrollX" :scroll-with-animation="true">
        <block>
          <view @click="choosenRealTime(1)" class="item" :class="param.rankType === 1 && param.cid === '' ? 'active' : ''">
            <text class="title">实时榜</text>
          </view>
          <view @click="choosenRealTime(2)" class="item" :class="param.rankType === 2 ? 'active' : ''">
            <text class="title">全天榜</text>
          </view>
          <view v-for="(item,index) in categoryList" :key="index" @click="choosenCategory(item, index)" class="item"
            :class="item.cid === param.cid ? 'active' : ''">
            <text class="title">{{item.cname}}</text>
          </view>
        </block>
      </scroll-view>
    </view>
    <ItemListComp1 class="item_box" v-if="questionList.length > 0" :rankType="param.rankType" :questionList="questionList"
      :userInfo="userInfo" />
    <ScrollToTop :scrollTop="scrollTop" />
  </view>
</template>

<script>
  import Head from '@/pages/pagecomponents/head'
  import ItemListComp1 from '@/pages/pagecomponents/itemlist1'
  import ScrollToTop from '@/pages/pagecomponents/other/scrolltotop'
  export default {
    components: {
      Head,
      ItemListComp1,
      ScrollToTop,
    },
    data() {
      return {
        scrollX: 0, // scroll窗口向左偏移的距离
        questionList: [],
        categoryList: [],
        queryList: [], // 查询出所有的100条数据记录
        param: {
          version: 'v1.0.2',
          pageId: 1,
          pageSize: 10,
          rankType: 1, // 榜单类型，1.实时榜 2.全天榜 3.热推榜（热推榜分类无效）4.复购榜
          cid: '', // 一级类目
        },
        isLoad: false,
        finished: false,
        scrollTop: 0, // 页面滚动高度
      }
    },
    onShareAppMessage(res) {},
    computed:{
      isDev(){
        return this.$store.state.isDev
      },
      userInfo(){
        return this.$store.state.userInfo
      },
    },
    onPageScroll(e) {
      // 滚动条滚动
      this.scrollTop = e.scrollTop
    },
    onReachBottom() {
      // 触底函数
      this.nextPaging()
    },
    onPullDownRefresh() {
      // 下拉刷新
      this.getItemList('pullDown')
      this.getCategoryList()
      this.getItemList()
    },
    onLoad() {
      this.getCategoryList()
      this.getItemList()
    },
    methods: {
      choosenRealTime(rankType) {
        // 点击实时/全天榜
        // #ifndef H5 || APP-PLUS
        getApp().mtj.trackEvent('category', { // 埋点统计
          category_name: rankType === 1 ? '实时榜' : '全天榜',
          user_id: this.userInfo.id || 0,
        });
        // #endif        
        this.param.cid = ''
        this.param.rankType = rankType
        this.questionList = []
        this.getItemList();
        uni.pageScrollTo({ // 滚动到顶部
          scrollTop: 0
        });
      },
      choosenCategory(item, index) {
        this.param.rankType = 1 // 选择类目时，榜单为实时榜
        // 点击一级类目
        // #ifndef H5 || APP-PLUS
        getApp().mtj.trackEvent('category', { // 埋点统计
          category_name: item.cname,
          user_id: this.userInfo.id || 0,
        });
        // #endif

        // 自动滚动 start
        let scrollX = 0;
        for (let i = 0; i <= index; i++) {
          scrollX += this.categoryList[i].cname.length * 14
        }
        this.scrollX = scrollX
        console.log(scrollX)
        // 自动滚动 end

        this.param.cid = item.cid;
        this.questionList = []
        this.param.pageId = 1
        this.param.pageSize = 10
        this.getItemList();
        uni.pageScrollTo({ // 滚动到顶部
          scrollTop: 0
        });
      },
      getCategoryList() {
        this.$api.dtkapi.getCategoryList({
          version: 'v1.0.1'
        }).then(res => {
          if (res.data && res.data.length > 0) {
            this.categoryList = res.data
          }
        })
      },
      nextPaging() {
        // 下一页
        if (this.finished !== true) {
          this.param.pageId += 1
          this.getItemList()
        }
      },
      getItemList(type) {
        if (type === 'pullDown') {
          // 下拉刷新
          this.isLoad = true
          this.questionList = []
          this.param.pageId = 1
        }
        if(this.param.pageId === 1){
          this.$api.dtkapi.getRankingList({
            ...this.param,
            pageSize: 100,
          }).then(res => {
            if (type === 'pullDown') {
              // 下拉刷新
              uni.stopPullDownRefresh();
            }
            this.queryList = res.data
            this.isLoad = false
            let offset = (this.param.pageId - 1) * this.param.pageSize;
            let imgList = res.data.slice(offset, offset + this.param.pageSize)
            let questionList = this.questionList
            questionList = questionList.concat(imgList)
            this.questionList = questionList
          })
        }else{
          this.isLoad = false
          if (this.param.pageId >= 10) {
            this.finished = true;
          }
          let offset = (this.param.pageId - 1) * this.param.pageSize;
          let imgList = this.queryList.slice(offset, offset + this.param.pageSize)
          let questionList = this.questionList
          questionList = questionList.concat(imgList)
          this.questionList = questionList
        }
      },
    }
  }
</script>

<style scoped lang="scss">
  .realtime_box {
    position: relative;
    min-height: 100%;
    padding: 120px 0 50upx;
    .category_top {
      position: fixed;
      top: 50px;
      left: 0;
      right: 0;
      padding: 0 20upx;
      margin-top: var(--status-bar-height);
      z-index: 2000;
      background: #ffffff;
      height: 50px;
      .scroll {
        width: 100%;
        white-space: nowrap;
        .item {
          display: inline-block;
          line-height: 80upx;
          +.item {
            margin-left: 32upx;
          }
        }
        .active {
          color: #4b6c92;
          font-weight: 600;
          border-bottom: 2px solid #4b6c92;
        }
      }
    }
    .category_sub {
      .item {
        width: 25%;
        display: inline-block;
        margin-bottom: 20upx;
        text-align: center;
        .img {
          width: 110upx;
          height: 110upx;
          border-radius: 50%;
          background-color: #f6f6f6;
        }
      }
    }
    .item_box {
      min-height: 800px;
    }
    .cu-load::before {
      content: none
    }
  }
</style>
